<template>
  <div class="memberComponent" v-if="oItem">
    <div class="style style1" v-if="oItem.main.showStyle == 1">
      
      
      <div
        class="layout layout1"
        v-if="oItem.main.showLayout == 1"
        :style="{
          backgroundColor: oItem.main.bgColor||'transparent',
          backgroundImage: 'url(\'' + oItem.main.bgImg + '\')',
          paddingTop: oItem.main.paddingTop + 'px',
          paddingBottom: oItem.main.paddingBottom + 'px',
          paddingLeft: oItem.main.paddingLR + 'px',
          paddingRight: oItem.main.paddingLR + 'px',
          borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
          borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
          borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
          borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
        }"
      >
        <div class="left">
          <img :src="oItem.main.avatar" class="avatar" alt="" />
          <div class="info">
            <p class="name" :style="{ color: oItem.main.nameColor||'transparent' }">
              {{ oItem.main.nickname }}
            </p>
            <div class="data">
              <p class="phone" v-if="oItem.main.showPhone">
                <span>
                  <i class="iconfont icon-shouji"></i>
                </span>
                157****4466
              </p>
              <p class="auth">
                <span>
                  <i class="iconfont icon-shimingrenzheng"></i>
                </span>
                实名认证
              </p>
            </div>
          </div>
        </div>
        <div class="right" v-if="oItem.main.showSetBtn">
          <i class="iconfont icon-shezhi"></i><span>设置</span>
        </div>
      </div>
      
      
      
      
      <div
        class="layout layout2"
        v-if="oItem.main.showLayout == 2"
        :style="{
          backgroundColor: oItem.main.bgColor||'transparent',
          backgroundImage: 'url(\'' + oItem.main.bgImg + '\')',
          paddingTop: oItem.main.paddingTop + 'px',
          paddingBottom: oItem.main.paddingBottom + 'px',
          paddingLeft: oItem.main.paddingLR + 'px',
          paddingRight: oItem.main.paddingLR + 'px',
          borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
          borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
          borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
          borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
        }"
      >
        <img :src="oItem.main.avatar" class="avatar" alt="" />
        <div class="name">
          <p>
            <span class="t" :style="{ color: oItem.main.nameColor||'transparent' }">{{
              oItem.main.nickname
            }}</span>
            <span class="a" v-if="oItem.main.showSetBtn">设置</span>
          </p>
        </div>
        <div
          class="data"
          :style="!oItem.main.showPhone ? 'justify-content:center;' : ''"
        >
          <p class="phone" v-if="oItem.main.showPhone">
            <span>
              <i class="iconfont icon-shouji"></i>
            </span>
            157****4466
          </p>
          <i class="line" v-if="oItem.main.showPhone"></i>
          <p class="auth">
            <span>
              <i class="iconfont icon-shimingrenzheng"></i>
            </span>
            实名认证
          </p>
        </div>
      </div>
      <div
        class="layout layout3"
        v-if="oItem.main.showLayout == 3"
        :style="{
          backgroundColor: oItem.main.bgColor||'transparent',
          backgroundImage: 'url(\'' + oItem.main.bgImg + '\')',
          paddingTop: oItem.main.paddingTop + 'px',
          paddingBottom: oItem.main.paddingBottom + 'px',
          paddingLeft: oItem.main.paddingLR + 'px',
          paddingRight: oItem.main.paddingLR + 'px',
          borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
          borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
          borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
          borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
        }"
      >
        <div class="left">
          <p class="name" :style="{ color: oItem.main.nameColor||'transparent' }">
            {{ oItem.main.nickname }}
          </p>
          <div class="data">
            <p class="phone" v-if="oItem.main.showPhone">157****4466</p>
            <p class="auth">
              <span>
                <i class="iconfont icon-shimingrenzheng"></i>
              </span>
              实名认证
            </p>
          </div>
        </div>
        <div class="right">
          <img :src="oItem.main.avatar" class="avatar" alt="" />
          <span class="a" v-if="oItem.main.showSetBtn"
            >设置<i class="iconfont icon-shezhi"></i
          ></span>
        </div>
      </div>
    </div>
 
 
    <div class="style style2" v-if="oItem.main.showStyle == 2">
      <div class="layout layout1" v-if="oItem.main.showLayout == 1">
        <div
          class="layout1bg"
          :style="{
            backgroundColor: oItem.main.underlyingBgColor||'transparent',
            backgroundImage: oItem.main.underlyingBgImg?('url(\''+oItem.main.underlyingBgImg+'\')'):'none',
            height:
              100 + oItem.main.paddingBottom / 2 + oItem.main.paddingTop + 'px',
          }"
        ></div>
        <div
          class="layout1wrapper"
          :style="{
            paddingTop: oItem.main.paddingTop + 'px',
            paddingBottom: oItem.main.paddingBottom + 'px',
            paddingLeft: oItem.main.paddingLR + 'px',
            paddingRight: oItem.main.paddingLR + 'px',
          }"
        >
          <div
            class="layout1content"
            :style="{
              backgroundColor: oItem.main.bgColor||'transparent',
              backgroundImage: oItem.main.bgImg?('url(\'' + oItem.main.bgImg + '\')'):'none',
              borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
              borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
              borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
              borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
              marginTop:
                oItem.main.paddingBottom + oItem.main.paddingTop / 3 + 'px',
              boxShadow:
                '5px 5px 5px rgba(0,0,0,0.1),-5px 5px 5px rgba(0,0,0,0.1),5px -5px 5px rgba(0,0,0,0.1)',
            }"
          >
            <div class="left">
              <img :src="oItem.main.avatar" class="avatar" alt="" />
              <div class="info">
                <p class="name" :style="{ color: oItem.main.nameColor||'transparent' }">
                  {{ oItem.main.nickname }}
                </p>
                <div
                  class="data"
                  :style="oItem.main.paddingLR > 10 ? 'width:100px;' : ''"
                >
                  <p
                    class="phone"
                    :style="
                      oItem.main.paddingLR > 10 ? 'margin-bottom:5px;' : ''
                    "
                    v-if="oItem.main.showPhone"
                  >
                    <span>
                      <i class="iconfont icon-shouji"></i>
                    </span>
                    157****4466
                  </p>
                  <p class="auth">
                    <span>
                      <i class="iconfont icon-shimingrenzheng"></i>
                    </span>
                    实名认证
                  </p>
                </div>
              </div>
            </div>
            <div class="right" v-if="oItem.main.showSetBtn">
              <i class="iconfont icon-shezhi"></i><span>设置</span>
            </div>
          </div>
        </div>
      </div>
      
      
      <div class="layout layout2" v-if="oItem.main.showLayout == 2">
        <div
          class="layout2bg"
          :style="{
            backgroundColor: oItem.main.underlyingBgColor||'transparent',
            backgroundImage: oItem.main.underlyingBgImg?('url(\''+oItem.main.underlyingBgImg+'\')'):'none',
            height:
              100 + oItem.main.paddingBottom / 2 + oItem.main.paddingTop + 'px',
          }"
        ></div>
        <div
          class="layout2wrapper"
          :style="{
            paddingTop: oItem.main.paddingTop + 'px',
            paddingBottom: oItem.main.paddingBottom + 'px',
            paddingLeft: oItem.main.paddingLR + 'px',
            paddingRight: oItem.main.paddingLR + 'px',
          }"
        >
          <div
            class="layout2content"
            :style="{
              backgroundColor: oItem.main.bgColor||'transparent',
              backgroundImage: oItem.main.bgImg?('url(\'' + oItem.main.bgImg + '\')'):'none',
              borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
              borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
              borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
              borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
              marginTop:
                oItem.main.paddingBottom + oItem.main.paddingTop / 3 + 'px',
              boxShadow:
                '5px 5px 5px rgba(0,0,0,0.1),-5px 5px 5px rgba(0,0,0,0.1),5px -5px 5px rgba(0,0,0,0.1)',
            }"
          >
            <img :src="oItem.main.avatar" class="avatar" alt="" />
            <div class="name">
              <p>
                <span class="t" :style="{ color: oItem.main.nameColor||'transparent' }">{{
                  oItem.main.nickname
                }}</span>
                <span class="a" v-if="oItem.main.showSetBtn">设置</span>
              </p>
            </div>
            <div
              class="data"
              :style="!oItem.main.showPhone ? 'justify-content:center' : ''"
            >
              <p class="phone" v-if="oItem.main.showPhone">
                <span>
                  <i class="iconfont icon-shouji"></i>
                </span>
                157****4466
              </p>
              <i class="line"></i>
              <p class="auth">
                <span>
                  <i class="iconfont icon-shimingrenzheng"></i>
                </span>
                实名认证
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="layout layout3" v-if="oItem.main.showLayout == 3">
        <div
          class="layout3bg"
          :style="{
            backgroundColor: oItem.main.underlyingBgColor||'transparent',
            backgroundImage: oItem.main.underlyingBgImg?('url(\''+oItem.main.underlyingBgImg+'\')'):'none',
            height:
              100 + oItem.main.paddingBottom / 2 + oItem.main.paddingTop + 'px',
          }"
        ></div>
        <div
          class="layout3wrapper"
          :style="{
            paddingTop: oItem.main.paddingTop + 'px',
            paddingBottom: oItem.main.paddingBottom + 'px',
            paddingLeft: oItem.main.paddingLR + 'px',
            paddingRight: oItem.main.paddingLR + 'px',
          }"
        >
          <div
            class="layout3content"
            :style="{
              backgroundColor: oItem.main.bgColor||'transparent',
              backgroundImage: oItem.main.bgImg?('url(\'' + oItem.main.bgImg + '\')'):'none',
              borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
              borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
              borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
              borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
              marginTop:
                oItem.main.paddingBottom + oItem.main.paddingTop / 3 + 'px',
              boxShadow:
                '5px 5px 5px rgba(0,0,0,0.1),-5px 5px 5px rgba(0,0,0,0.1),5px -5px 5px rgba(0,0,0,0.1)',
            }"
          >
            <div class="left">
              <p class="name" :style="{ color: oItem.main.nameColor||'transparent' }">
                {{ oItem.main.nickname }}
              </p>
              <div class="data">
                <p class="phone" v-if="oItem.main.showPhone">157****4466</p>
                <p class="auth">
                  <span>
                    <i class="iconfont icon-shimingrenzheng"></i>
                  </span>
                  实名认证
                </p>
              </div>
            </div>
            <div class="right">
              <img :src="oItem.main.avatar" class="avatar" alt="" />
              <span class="a" v-if="oItem.main.showSetBtn"
                >设置<i class="iconfont icon-shezhi"></i
              ></span>
            </div>
          </div>
        </div>
      </div>
   
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "memberComponent",
  data() {
    return {
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      //console.log("memberComponent被通知更新");
      this.oItem = JSON.parse(control);
    });
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.memberComponent {
  .avatar {
    width: 60px;
    height: 60px;
    border: 4px solid #fff;
    border-radius: 100%;
  }
  .name {
    font-size: 14px;
  }
  .style1 {
    .layout1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-attachment: scroll;
      .left {
        display: flex;
        align-items: center;
        padding: 30px 0 30px 15px;
        .info {
          padding-left: 15px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          .name {
            color: #0b0205;
            margin-bottom: 5px;
          }
          .data {
            display: flex;
            align-items: center;
            .phone {
              display: flex;
              font-size: 12px;
              // align-items: center;
              width: 100px;
              margin-right: 20px;
              height: 22px;line-height: 25px;
              color: #0b0205;
              border-radius: 20px;
              background-color: #fff;
              span {
                background-color: #ffbd52;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                width: 22px;
                margin-right: 5px;
                height: 22px;
                i {
                  font-size: 14px;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  color: #fff;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
            .auth {
              display: flex;
              font-size: 12px;
              width: 80px;
              align-items: center;
              height: 22px;
              border-radius: 20px;
              cursor: pointer;
              color: #ff3f26;
              background-color: #fff;

              span {
                background-color: #ff3f26;
                display: flex;
                align-items: center;
                border-radius: 100%;
                justify-content: center;
                width: 22px;
                margin-right: 5px;
                height: 22px;
                i {
                  font-size: 14px;
                  color: #fff;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
      .right {
        width: 30px;
        display: flex;
        flex-direction: column;
        margin-right: 15px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;
        i {
          margin-bottom: 5px;
        }
        span {
          font-size: 12px;
          cursor: pointer;
          color: #54404c;
        }
        &::before {
          content: " ";
          width: 1px;
          height: 100%;
          background: #54404c;
          position: absolute;
          left: -15px;
          z-index: 2;
        }
      }
    }
    .layout2 {
      display: flex;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-attachment: scroll;
      .avatar {
        margin-top: 20px;
      }
      .name {
        padding: 10px 0 20px;
        display: flex;
        justify-content: center;
        p {
          display: inline-block;
          position: relative;
          text-align: center;
          .a {
            position: absolute;
            font-size: 12px;
            right: -45px;
            top: -2px;
            color: #54404c;
            border: 1px solid #54404c;
            cursor: pointer;
            border-radius: 5px;
            padding: 2px 5px;
            width: 38px;
            display: inline-block;
          }
        }
      }
      .data {
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 20px;
        justify-content: space-around;
        width: 100%;
        .phone {
          display: flex;
          font-size: 12px;
          // align-items: center;
          width: 100px;line-height: 25px;
          height: 22px;
          color: #0b0205;
          border-radius: 20px;
          background-color: #fff;
          span {
            background-color: #ffbd52;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            width: 22px;
            margin-right: 5px;
            height: 22px;
            i {
              font-size: 14px;
              width: 100%;
              height: 100%;
              display: flex;
              color: #fff;
              align-items: center;
              justify-content: center;
            }
          }
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 12px;
          position: relative;
          top: 4px;
          background-color: #fff;
        }
        .auth {
          display: flex;
          font-size: 12px;
          width: 86px;
          align-items: center;
          height: 22px;
          cursor: pointer;
          border-radius: 20px;
          color: #fff;
          background-color: #ff3f26;
          box-shadow: 5px 5px 5px 1px rgba(255, 63, 38, 0.09);
          span {
            display: flex;
            align-items: center;
            border-radius: 100%;
            justify-content: center;
            width: 22px;
            margin-right: 5px;
            height: 22px;
            i {
              font-size: 14px;
              color: #fff;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
    .layout3 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-attachment: scroll;
      .left {
        display: flex;
        padding-top: 50px;
        flex-direction: column;
        margin-bottom: 20px;
        position: relative;
        top: -10px;
        margin-left: 20px;
        .name {
          color: #0b0205;
          font-size: 14px;
        }
        .data {
          padding-top: 5px;
          display: flex;
          align-items: center;
          .phone {
            font-size: 12px;
            margin-right: 30px;
            height: 22px;line-height: 25px;
            display: flex;
            // align-items: center;
            line-height: 22px;
            color: #54404c;
          }
          .auth {
            display: flex;
            font-size: 12px;
            width: 80px;
            align-items: center;
            height: 22px;
            border-radius: 20px;
            cursor: pointer;
            color: #ff3f26;
            background-color: #fff;

            span {
              background-color: #ff3f26;
              display: flex;
              align-items: center;
              border-radius: 100%;
              justify-content: center;
              width: 22px;
              margin-right: 5px;
              height: 22px;
              i {
                font-size: 14px;
                color: #fff;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }
      .right {
        position: relative;
        display: flex;
        justify-content: flex-end;
        padding-top: 50px;
        margin-bottom: 20px;
        margin-right: 20px;
        .a {
          font-size: 12px;
          position: absolute;
          z-index: 2;
          top: 25px;
          width: 50px;
          cursor: pointer;
          right: -10px;
          color: #0b0205;
          i {
            font-size: 12px;
            margin-left: 3px;
          }
        }
      }
    }
  }
  .style2 {
    display: flex;
    .layout1 {
      display: flex;
      width: 100%;
      flex-direction: column;
      position: relative;
      .layout1bg {
        width: 100%;
        min-height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        border-radius: 0 0 20px 20px;
        box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
      }
      .layout1wrapper {
        width:100%;
        margin-top: 40px;
        position: relative;
        z-index: 2;box-sizing: border-box;
        .layout1content {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width:calc(100% - 40px);
          margin: 0 20px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-attachment: scroll;
          border-radius: 10px;
          z-index: 2;
          .left {
            display: flex;
            align-items: center;
            min-width: 170px;
            padding: 30px 0 30px 10px;
            .avatar {
              height: 50px;
              width: 50px;
            }
            .info {
              padding-left: 10px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              .name {
                color: #0b0205;
                margin-bottom: 5px;
              }
              .data {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                min-width: 100px;
                .phone {
                  display: flex;
                  font-size: 12px;
                  // align-items: center;
                  width: 100px;
                  margin-right: 10px;
                  height: 22px;line-height: 25px;
                  color: #0b0205;
                  border-radius: 20px;
                  background-color: #fff;
                  span {
                    background-color: #ffbd52;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 100%;
                    width: 22px;
                    margin-right: 5px;
                    height: 22px;
                    i {
                      font-size: 14px;
                      width: 100%;
                      height: 100%;
                      display: flex;
                      color: #fff;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }
                .auth {
                  display: flex;
                  font-size: 12px;
                  width: 80px;
                  align-items: center;
                  height: 22px;
                  border-radius: 20px;
                  cursor: pointer;
                  color: #ff3f26;
                  background-color: #fff;

                  span {
                    background-color: #ff3f26;
                    display: flex;
                    align-items: center;
                    border-radius: 100%;
                    justify-content: center;
                    width: 22px;
                    margin-right: 5px;
                    height: 22px;
                    i {
                      font-size: 14px;
                      color: #fff;
                      width: 100%;
                      height: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }
              }
            }
          }
          .right {
            width: 30px;
            min-width: 30px;
            display: flex;
            flex-direction: column;
            margin-right: 10px;
            cursor: pointer;
            justify-content: center;
            align-items: center;
            position: relative;
            i {
              margin-bottom: 5px;
              cursor: pointer;
            }
            span {
              font-size: 12px;
              cursor: pointer;
              color: #54404c;
            }
            &::before {
              content: " ";
              width: 1px;
              height: 100%;
              background: #54404c;
              position: absolute;
              left: -15px;
              z-index: 2;
            }
          }
        }
      }
    }
    .layout2 {
      display: flex;
      width: 100%;
      flex-direction: column;
      position: relative;
      .layout2bg {
        width: 100%;
        min-height: 100px;
        position: absolute;
        left: 0;box-sizing: border-box;
        top: 0;
        z-index: 1;
        border-radius: 0 0 20px 20px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
      }
      .layout2wrapper {
        margin-top: 40px;
        position: relative;
        z-index: 2;box-sizing: border-box;
        .layout2content {
          position: relative;
          display: flex;
          margin: 0 20px;box-sizing: border-box;
          align-items: center;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-attachment: scroll;
          flex-direction: column;
          justify-content: space-between;
          border-radius: 10px;
          z-index: 2;
          .avatar {
            margin-top: 20px;
          }
          .name {
            padding: 10px 0 20px;
            display: flex;
            justify-content: center;
            p {
              display: inline-block;
              position: relative;
              text-align: center;
              .a {
                position: absolute;
                font-size: 12px;
                right: -45px;
                top: -2px;
                color: #54404c;
                border: 1px solid #54404c;
                cursor: pointer;
                border-radius: 5px;
                padding: 2px 5px;
                width: 38px;
                display: inline-block;
              }
            }
          }
          .data {
            display: flex;
            justify-content: center;
            position: relative;
            margin-bottom: 20px;
            justify-content: space-around;
            width: 100%;
            .phone {
              display: flex;
              font-size: 12px;
              // align-items: center;
              width: 100px;line-height: 25px;
              height: 22px;
              color: #0b0205;
              border-radius: 20px;
              background-color: #fff;
              span {
                background-color: #ffbd52;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                width: 22px;
                margin-right: 5px;
                height: 22px;
                i {
                  font-size: 14px;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  color: #fff;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
            .line {
              display: inline-block;
              width: 1px;
              height: 12px;
              position: relative;
              top: 4px;
              background-color: #fff;
            }
            .auth {
              display: flex;
              font-size: 12px;
              width: 86px;
              align-items: center;
              height: 22px;
              cursor: pointer;
              border-radius: 20px;
              color: #fff;
              background-color: #ff3f26;
              box-shadow: 5px 5px 5px 1px rgba(255, 63, 38, 0.09);
              span {
                display: flex;
                align-items: center;
                border-radius: 100%;
                justify-content: center;
                width: 22px;
                margin-right: 5px;
                height: 22px;
                i {
                  font-size: 14px;
                  color: #fff;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
    .layout3 {
      display: flex;
      width: 100%;
      .layout3bg {
        width: 100%;
        min-height: 100px;
        position: absolute;
        left: 0;box-sizing: border-box;
        top: 0;
        z-index: 1;
        border-radius: 0 0 20px 20px;
        background-position: center center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-attachment: scroll;
      }
      .layout3wrapper {
        width: 100%;
        margin-top: 40px;
        position: relative;
        z-index: 2;box-sizing: border-box;
        background-position: center center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-attachment: scroll;
        .layout3content {
          position: relative;
          display: flex;
          margin: 0 20px;
          align-items: center;
          justify-content: space-between;
          border-radius: 10px;
          z-index: 2;
          box-sizing: border-box;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-attachment: scroll;
          .left {
            display: flex;
            padding-top: 50px;
            flex-direction: column;
            margin-bottom: 20px;
            position: relative;
            top: -10px;

            margin-left: 20px;
            .name {
              color: #0b0205;
              font-size: 14px;
            }
            .data {
              padding-top: 5px;
              display: flex;
              align-items: center;
              .phone {
                font-size: 12px;
                margin-right: 30px;
                height: 22px;line-height: 25px;
                display: flex;
                // align-items: center;
                line-height: 22px;
                color: #54404c;
              }
              .auth {
                display: flex;
                font-size: 12px;
                width: 80px;
                align-items: center;
                height: 22px;
                border-radius: 20px;
                cursor: pointer;
                color: #ff3f26;
                background-color: #fff;

                span {
                  background-color: #ff3f26;
                  display: flex;
                  align-items: center;
                  border-radius: 100%;
                  justify-content: center;
                  width: 22px;
                  margin-right: 5px;
                  height: 22px;
                  i {
                    font-size: 14px;
                    color: #fff;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                }
              }
            }
          }
          .right {
            position: relative;
            display: flex;
            justify-content: flex-end;
            padding-top: 50px;
            margin-bottom: 20px;
            margin-right: 20px;
            .a {
              font-size: 12px;
              position: absolute;
              z-index: 2;
              top: 25px;
              width: 50px;
              cursor: pointer;
              right: -10px;
              color: #0b0205;
              i {
                font-size: 12px;
                margin-left: 3px;
              }
            }
          }
        }
      }
    }
  }
}
</style>